<template>
  <div class="p-2">
    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" v-hasPermi="['enterpriseConfig:cover:add']"
              @click="handleAdd">上传</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
              v-hasPermi="['enterpriseConfig:cover:remove']">删除</el-button>
          </el-col>
          <right-toolbar @queryTable="getList"></right-toolbar>
        </el-row>
      </template>

      <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="主键ID" align="center" prop="id" v-if="false" />
        <el-table-column label="封面" align="center">
          <template #default="scope">
            <el-image :src="scope.row.url" style="width: 72px;height: 98px;" fit="cover" />
          </template>
        </el-table-column>


        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="删除" placement="top">
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                v-hasPermi="['enterpriseConfig:cover:remove']"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>

    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
      <div>
        <ImageUpload v-model="fileList" :fileSize="10" ref="imageUploadRefs" />

      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" :fileSize="20" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang='ts'>
import { knowledgeApiSysPortalImages,knowledgeApiSysPortalImagesDel } from '@/api/enterprise/enterpriseCover/indexApi';
import ImageUpload from './ImageUpload.vue';
const { proxy } = getCurrentInstance() as any
const loading = ref(false)
const dataList = ref([])
const ids = ref<Array<string | number>>([]);

const multiple = ref(true);
const total = ref(0);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
})
const dialog = ref({
  visible: false,
  title: '上传图片'
})
const imageUploadRefs = ref()
const buttonLoading = ref(false)
const fileList = ref([])
const getList = () => {
  knowledgeApiSysPortalImages({
    module: "enterprise",
    page: queryParams.value.pageNum - 1,
    size: queryParams.value.pageSize
  }).then((res: any) => {
    dataList.value = res.rows
    total.value = res.total
  })
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: any) => {
  ids.value = selection.map(item => item.id);
  multiple.value = !selection.length;
}

/**新增 */
const handleAdd = () => {
  dialog.value.visible = true
  nextTick(()=>{
   imageUploadRefs.value.otherParams = {
    info:JSON.stringify({module:'enterprise'}),
    type:"publicImages"
  }

  })
  
}

/** 删除按钮操作 */
const handleDelete = async (row?: any) => {
  const _ids = row?.id ? [row.id] : ids.value;
  await proxy?.$modal.confirm('是否确认删除知识库配置11编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
  await knowledgeApiSysPortalImagesDel(_ids);
  proxy?.$modal.msgSuccess("删除成功");
  await getList();
}

/**上传对话框确认 */
const submitForm = () =>{
  cancel()
  getList();
}
/**上传对话框取消 */
const cancel = () =>{
  dialog.value.visible = false
  fileList.value = []

}
onMounted(() => {
  getList()
});
</script>
<style scoped lang='scss'></style>